<template>
  <div>
    <quill-editor v-model="newValue"
                  v-bind="attrs"
                  ref="myQuillEditor"
                  v-on="onEvents"
    />
  </div>
</template>

<script>
import formMixin from 'vue-ele-form/lib/mixins/formMixin';
import { debounce } from '@/utils/utils';

export default {
    name: 'ele-form-quill-edit', // name 属性必须填写, 在使用时, 需要和这里定义的 name 一致
    mixins: [formMixin], // 必须引入mixin
    props: {
    // value 是传递过来的值
        value: String,
        // desc是此组件的描述, 结构为
        // { style: {}, class: {}, on: {}, attrs: {} }
        desc: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    data () {
        return {
            defaultAttrs: {
                options: {
                    modules: {
                        toolbar: [
                            ['bold', 'italic'],
                            [{ color: [] }, { background: [] }],
                            ['link'],
                            ['clean']
                        ]
                    }
                }
            },
            newValue: this.value
        };
    },
    methods: {
        handleChange: debounce(function (val) {
            this.$emit('input', val);
        }, 1200)
    },
    mounted () {
        // const quill = this.$refs.myQuillEditor.quill;
        // quill.on('selection-change', function (range, oldRange, source) {
        //     console.log(range, oldRange, source);
        //     const tooltip = quill.theme.tooltip;
        //     const input = tooltip.root.querySelector('input[data-link]');
        //     input.value = '';
        // });
    }
};
</script>

<style scoped>

</style>
